<template>
  <el-dialog :visible.sync="visible" v-if="visible" :title="title">
    <el-form :model="formData" :rules="rules" ref="formRef" label-width="80px">
      <el-form-item label="记录类型">
        <el-select v-model="formData.type" disabled>
          <el-option :value="1" label="保养"/>
          <el-option :value="2" label="维修"/>
        </el-select>
      </el-form-item>
      <el-form-item label="开始时间" prop="startTime">
        <el-date-picker v-model="formData.startTime" type="datetime" placeholder="选择开始时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间" prop="endTime">
        <el-date-picker v-model="formData.endTime" type="datetime" placeholder="选择结束时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="费用" prop="money">
        <el-input v-model="formData.money"/>
      </el-form-item>
      <el-form-item label="记录备注">
        <el-input v-model="formData.content" type="textarea" :maxlength="150" show-word-limit placeholder="请输入记录备注"/>
      </el-form-item>
      <el-form-item label="状态">
        <el-radio-group v-model="formData.status">
          <el-radio :label="1">可用</el-radio>
          <el-radio :label="2">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">提交</el-button>
        <el-button type="warning" @click="visible = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
const formData = {
  id: '',
  type: 1,
  content: '',
  money: '',
  status: 1,
  startTime: '',
  endTime: ''
}
export default {
  name: 'recordUpdate',
  data () {
    return {
      visible: false,
      title: '添加数据',
      formData,
      rules: {
        startTime: [{
          required: true,
          message: '请选择开始时间'
        }],
        endTime: [{
          required: true,
          message: '请选择结束时间'
        }, {
          validator: (rule, value, cb) => {
            if (value.getTime() < this.formData.startTime.getTime()) {
              cb(new Error('结束时间不能在开始时间之前'))
            } else {
              cb()
            }
          }
        }],
        money: [{
          pattern: /(^[1-9](\d+)?(\.\d{1,2})?$)|(^0$)|(^\d\.\d{1,2}$)/,
          message: '请输入正确的金额'
        }]
      }
    }
  },
  methods: {
    init (type, id) {
      this.visible = true
      this.title = id ? '修改数据' : '添加数据'
      this.formData = { ...formData, type }
      if (id) {
        this.$http.get(`record/info/${id}`).then(data => {
          if (data) {
            this.formData = {
              ...data,
              startTime: new Date(data.startTime.replace(' ', 'T')),
              endTime: new Date(data.endTime.replace(' ', 'T'))
            }
          }
        }).catch(() => {})
      }
    },
    submit () {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          const formData = { ...this.formData }
          formData.startTime = this.formatDateTime(formData.startTime)
          formData.endTime = this.formatDateTime(formData.endTime)
          this.$http.post('record/update', formData).then(() => {
            this.$message.success('操作成功')
            this.visible = false
            this.$emit('closeDialog')
          }).catch(() => {})
        }
      })
    },
    formatDateTime (date) {
      if (date) {
        const year = date.getFullYear()
        const month = date.getMonth() + 1
        const day = date.getDate()
        const hours = date.getHours()
        const mins = date.getMinutes()
        const secs = date.getSeconds()

        return `${year}-${this.formatNumber(month)}-${this.formatNumber(day)} ${this.formatNumber(hours)}:${this.formatNumber(mins)}:${this.formatNumber(secs)}`
      }
      return ''
    },
    formatNumber (num) {
      return num < 10 ? '0' + num : num
    }
  }
}
</script>

<style scoped>

</style>
